<template>
    <section class="section">
        <div>
            <mt-header title="开始检查" class="header">
                <router-link to="/mycheckContent" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
                <i slot="right" @click="open = true" class="iconfont iconshaixuan4 active-color right-icon"></i>
            </mt-header>
        </div>
        <section class="content">
            <div class="con">
                <ul>
                    <li><span>项目名称:</span><span>{{data.orgName}}</span></li>
                    <li><span>检查类型:</span><span>{{data.checkTypeName}}</span></li>
                    <li><span>所属区域:</span><span>{{data.areaName}}</span></li>
                    <li><span>检查部位:{{data.checkParts}}</span></li>
                </ul>
                <mu-form ref="form" :model="validateForm" class="mu-demo-form">
                    <ul>
                        <li>
                            <mu-form-item label="检查结果:"  prop="radio" :rules="radio">
                                <mu-radio value='0' v-model="validateForm.radio" @change='choice' label="无问题"></mu-radio>
                                <mu-radio value='1' v-model="validateForm.radio" @change='choice' label="有问题"></mu-radio>
                            </mu-form-item>
                        </li>
                    </ul>
                    <ul v-if="show">
                        <li>
                            <mu-form-item style="width:100%;" prop="rectCopyUserIds" help-text="请选择抄送人" label="抄送人" :rules="rectCopyUserIds">
                                <mu-select  filterable multiple v-model="validateForm.rectCopyUserIds" full-width >
                                    <mu-option v-for="(city,index) in citys" :key="index" :label="city.name" :value="city.id"></mu-option>
                                </mu-select>
                            </mu-form-item>
                        </li>
                        <li>
                            <span>检查人签字:</span><span>{{'测试王丽'}}</span>
                        </li>
                        <li>
                        <mu-form-item>
                            <mu-button color="primary" @click="submit">提交</mu-button>
                            <mu-button @click="clear">重置</mu-button>
                        </mu-form-item>
                    </li>
                    </ul>
                    <ul v-if="!show" >
                        <li style="display: flex;justify-content: center">
                            <span><mu-button small color="primary" @click="add">新增质量问题</mu-button></span>
                        </li>
                    </ul>
                    <!--问题模板组件-->
                    <ul v-if="!show">
                        <li v-for="(d,index) in counter" :key="index">
                            <ProblemTemplate @ProblemChange="handleProblemChange"></ProblemTemplate>
                        </li>
                        <li>
                            <mu-form-item>
                                <mu-button color="primary" @click="submit">提交</mu-button>
                                <mu-button @click="clear">重置</mu-button>
                            </mu-form-item>
                        </li>
                    </ul>
                </mu-form>
            </div>
        </section>
    </section>
</template>

<script>
    import ProblemTemplate from '../../QualityModule/ProblemTemplate'
    export default {
        name: "startInvestigation",
        components:{
            ProblemTemplate
        },
        data () {
            return{
                ProblemSet:[],
                counter:[],
                radio:[
                    { validate: (val) => !!val, message: '必须填写检查结果'}
                ],
                rectCopyUserIds:[
                    { validate: (val) => !!val, message: '必须填写检查结果'}
                ],
                citys: [],
                data:{},
                show:true,
                validateForm: {
                    radio:'',
                    rectCopyUserIds:[],
                }
            }
        },
        mounted () {
            this.fetch();
            this.personnel();
        },
        methods:{
            /**
             * 子组件更新父组件数据
             */
            handleProblemChange(payload) {
                console.log("载荷：", payload);
                this.ProblemSet.push(payload);
                console.log(this.ProblemSet);
            },
            //增加质量问题
            add () {
                this.counter.push({})
            },
            submit () {
                this.$refs.form.validate().then((result) => {
                    console.log(this.data);
                    if (result == true) {
                        let params = {
                            areaId:this.data.areaId,
                            checkCopyUserIds:this.validateForm.rectCopyUserIds,//检查抄送人
                            checkParts:this.data.checkParts,
                            checkResult:this.validateForm.radio,//检查结果 0无问题 1有问题
                            // checkSignature:this. 签名
                            checkTypeId:this.data.checkTypeId,//检查类型id
                            orgId:this.data.orgId,//项目id
                            // id:this.data.id,
                            id:'159827745033945494',
                            // scenePhotos://现场照片 格式[‘1’,’2’]
                            problemList:this.ProblemSet,//问题列表
                        };
                        this.$A.Go('post', '/safety/checkTask/submit', params).then((success) => {
                            if (success.code == 200) {
                                this.$A.MS('提交成功！', 'success')
                            }else {
                                this.$A.MS('操作失败！', 'error')
                            }
                        })
                    }
                });
            },
            clear () {
                this.$refs.form.clear();
                this.validateForm = {
                    username: '',
                    password: '',
                    isAgree: false
                };
            },
            //人员信息接口
            personnel () {
                this.$A.Go('post', '/safety/corp/users',{
                    obj:{
                        projectId:'60820044036178326',
                    },
                    pageNo:1,
                    pageSize:10,
                }).then((success) => {
                    if (success.code == 200) {
                        for (var i in success.body) {
                            this.citys.push({name:success.body[i].fullName,id:success.body[i].id})
                        }
                        console.log(this.citys);
                    }else {
                    }
                })
            },
            //获取回显信息
            fetch () {
                let params = {
                    id: '159714885104566678',
                };
                this.$A.Go('get', '/safety/checkPlan/detail', params).then((success) => {
                    if (success.code == 200) {
                        console.log(success);
                        this.data = success.body;
                    }else {

                    }
                })
            },
            choice () {
                if(this.validateForm.radio == 0){
                    this.show = true;
                }else {
                    this.show = false;
                };
            }
        }
    }
</script>

<style scoped lang="scss">
    .section{
        height: 100%;
        width: 100%;
        display:flex;
        flex-direction: column;
        .content {
            flex:1;
            overflow: auto;
            padding: 0.1rem 0;
            .con{
                display:flex;
                flex-direction:column;
                padding:0.1rem;
                ul{
                    background: white;
                    width:100%;
                    height:100%;
                    list-style: none;
                    padding:0.12rem;
                    margin:0.01rem 0;
                    overflow: hidden;
                    font-size: 0.12rem;
                    li{
                        width:100%;
                        height:100%;
                        display: flex;
                        justify-content: space-between;
                        padding:0.1rem 0;
                    }
                }
            }
        }
    }
</style>
